import React, { Component } from 'react';
import { Form, Select,Row,Col,Checkbox,InputNumber } from 'antd';
import './modal.css';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';


const { Option } = Select;

class EditDaoForm extends Component {

  static propTypes = {     
    id: PropTypes.string.isRequired,
    vLine: PropTypes.bool.isRequired,
    hLine: PropTypes.bool.isRequired,
    setForm: PropTypes.func.isRequired,
  }
  

  formRef = React.createRef();  // form对象 


  componentWillMount(){
    this.props.setForm(this.formRef);  
    
  } 


  render() {

    let index=0;  //确定dao的id
    this.props.mbData.mb_dao.map((item,index1)=>{
      if(this.props.id==item.id){
        index=index1;
      }
    })
    const {vgridNumber,hgridNumber,hlinetype,vlinetype,dao_width}=this.props.mbData.mb_dao[index]
    
    
    const default1 = [];
    if(this.props.vLine){
      default1.push('v-line');
    }
    if(this.props.hLine){
     default1.push('h-line');
    } 

    return (
      <div className="edit-curve-form">
        <Form 
          ref={this.formRef}   
          name="control-ref" 
          initialValues={{
            checkbox: default1,
            vgridNumber:vgridNumber,
            hgridNumber:hgridNumber,
            vlineType:vlinetype,
            hlineType:hlinetype,
            dao_width:dao_width
          }}
        >  
        <Form.Item 
          name="checkbox" 
        >  
          <Checkbox.Group  
            ref={this.formRef}    
            style={{display: 'inline'}}
          >
            <Row>
              <Col span={4}></Col>
              <Col span={10}>
                <Checkbox value="h-line" name="h-line" style={{ lineHeight: '32px' }}>
                  横格线
                </Checkbox>
              </Col>
              <Col span={10}>
                <Checkbox value="v-line" name="v-line"  style={{ lineHeight: '32px' }} >
                  纵格线
                </Checkbox>
              </Col>  
            </Row>
            
          </Checkbox.Group>
        </Form.Item>
        <Row>
            <Col span={1}></Col>
            <Col span={11}>
              <Form.Item 
                name="vgridNumber"
                label="纵格数 "
                rules={[{ required: true , message:" "}]}   
              >
                <InputNumber 
                  max={10}
                  min={2}
                  className="data-config-input" 
                  style={{width:85}} />
              </Form.Item>
            </Col>
            <Col span={1}></Col>
            <Col span={10}>
              <Form.Item 
                name="vlineType"
                label="线型 "   
              >
                <Select
                  defaultValue="solid"
                  style={{width:85}}
                >
                  <Option value='solid'>实线</Option>
                  <Option value='dashed'>虚线</Option>
                  <Option value='dotted'>点线</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row> 
          <Row>
            <Col span={1}></Col>
            <Col span={11}>
              <Form.Item
                name="hgridNumber"
                label="横格数 "
                rules={[{ required: true , message:"不能为空！"}]}   
              >
                <InputNumber 
                max={10}
                min={2}
                className="data-config-input" 
                style={{width:85}} />
              </Form.Item>
            </Col>
            <Col span={1}></Col>
            <Col span={10}>
              <Form.Item 
                name="hlineType"
                label="线型 "   
              >
                <Select
                  defaultValue="solid"
                  style={{width:85}}
                >
                  <Option value='solid'>实线</Option>
                  <Option value='dashed'>虚线</Option>
                  <Option value='dotted'>点线</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={2}></Col>
            <Col span={11}>
              <Form.Item
                name="dao_width"
                label="宽度 "
              >
                <InputNumber 
                max={1000}
                min={50}
                className="data-config-input" 
                style={{width:85}} />
              </Form.Item>
            </Col>
          </Row>          
       </Form>       
      </div>  
    )
  }
}

export default connect(
  state => ({user: state.user ,mbData:state.mbData}),
  {}
)(EditDaoForm);

